<template>
	<!-- 配置设置 -->
	<view class="configurationSetting-main">
		<view class="configurationSetting-content">
			<view class="configurationSetting-item">
				<view class="configurationSetting-title">配送方式</view>
				<view class="configurationSetting-value">
					<u-checkbox-group v-model="checked" placement="row">
						<u-checkbox activeColor="#2979ff" label="送货上门" :customStyle="{ marginLeft: '8px' }" disabled :name="0"></u-checkbox>
						<u-checkbox activeColor="#2979ff" label="到店自提" :customStyle="{ marginLeft: '8px' }" disabled :name="0"></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>

			<view class="deliveryTime">
				<view class="deliveryTime-header">营业时间</view>
				<view class="deliveryTime-item">
					<view class="deliveryTime-item-left">开始时间</view>
					<view class="deliveryTime-item-right">
						<u-number-box v-model="startTime" :min="1" :max="24" :inputWidth="100"></u-number-box>
						<text style="margin-left: 10px">点</text>
					</view>
				</view>
				<view class="deliveryTime-item">
					<view class="deliveryTime-item-left">结束时间</view>
					<view class="deliveryTime-item-right">
						<u-number-box v-model="endTime" :min="1" :max="24" :inputWidth="100"></u-number-box>
						<text style="margin-left: 10px">点</text>
					</view>
				</view>
			</view>

			<view class="deliveryTime" v-if="storeType == '1'">
				<view class="deliveryTime-header">配送设置</view>
				<view class="deliveryTime-item">
					<view class="deliveryTime-item-left">起送价格</view>
					<view class="deliveryTime-item-right">
						<u-number-box v-model="price" :min="1" :max="99999" :decimalLength="2" :inputWidth="100"></u-number-box>
						<text style="margin-left: 10px">元</text>
					</view>
				</view>
			</view>

			<view class="btn" @click="settingSub">确定</view>
		</view>

		<view class="distributionScope-box">
			<view class="distributionScope-header">配送费范围设置</view>
			<view class="distributionScope-freePir">
				<text style="margin-right: 10px">满</text>
				<uni-easyinput type="text" v-model="freePir" placeholder="请输入预估配送费" />
				<text style="margin-left: 10px">免配送费</text>
			</view>
			<view class="distributionScope-form">
				<view class="distributionScope-item" v-for="(item, index) in distributionScope" :key="index">
					<view class="distributionScope-title">{{ index + 1 }}、配送范围</view>
					<view class="distributionScope-pir">
						<text style="margin-right: 10px">预估配送费</text>
						<uni-easyinput type="text" v-model="item.price" placeholder="请输入预估配送费" />
					</view>
					<view class="distributionScope-distance">
						<u-number-box v-model="item.start_distance" :min="1" :max="99999" :inputWidth="50"></u-number-box>
						<text style="margin-left: 8px">米</text>
						<text style="margin: 0px 10px">-</text>
						<u-number-box v-model="item.end_distance" :min="1" :max="99999" :inputWidth="50"></u-number-box>
						<text style="margin-left: 8px">米</text>
					</view>
				</view>

				<view class="distributionScope-btn">
					<view class="btn" @click="addDistributionScope">添加配置</view>
					<view class="btn" @click="getStoreDeliveryPrice">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { storeWorkTime, storeStartPrice, storeDeliveryPrice } from '../../../api/payment/index.js';
export default {
	data() {
		return {
			checked: [0, 1],
			startTime: '',
			endTime: '',
			price: 1,
			storeType: '',
			distributionScope: [
				{
					price: '',
					start_distance: '',
					end_distance: ''
				}
			],
			freePir: '',
			deliveryFeeInfo:null
		};
	},
	onLoad() {
		this.storeType = this.$store.state.storeType;
		const deliveryFeeInfo = this.$store.state.storeInfo.delivery_fee;
		if(deliveryFeeInfo){
			const infos = JSON.parse(deliveryFeeInfo);
			this.freePir = infos.min_price;
			this.distributionScope = infos.prices;
		}
	},
	methods: {
		settingSub() {
			this.getStoreWorkTime();
			if (this.storeType == '1') {
				this.getstoreStartPrice();
			}
		},

		async getStoreWorkTime() {
			if (this.startTime >= this.endTime) {
				return uni.showToast({
					title: '开始时间必须小于结束时间',
					icon: 'none'
				});
			}
			try {
				const resData = await storeWorkTime({
					start: this.startTime,
					end: this.endTime,
					type: this.storeType
				});
				uni.showToast({
					title: '设置成功',
					icon: 'none'
				});
			} catch (e) {
				throw Error(e);
			}
		},

		async getstoreStartPrice() {
			try {
				const resData = await storeStartPrice({
					price: this.price,
					type: 1
				});
			} catch (e) {
				throw Error(err);
				//TODO handle the exception
			}
		},

		addDistributionScope() {
			this.distributionScope.push({
				price: '',
				start_distance: '',
				end_distance: ''
			});
		},

		// 设置配送范围
		async getStoreDeliveryPrice() {
			try {
				const resData = await storeDeliveryPrice({
					type: 1,
					min_price: this.freePir,
					prices: this.distributionScope
				});
				if (resData.code == 1) {
					return uni.showToast({
						title: '设置成功',
						icon: 'none'
					});
				}
			} catch (e) {
				throw Error(err);
				//TODO handle the exception
			}
		}
	}
};
</script>

<style scoped lang="scss">
.configurationSetting-main {
	box-sizing: border-box;
	padding: 30rpx;
	.configurationSetting-content {
		background-color: #fff;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 30rpx;
		.configurationSetting-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			border-bottom: 1px #f3f3f3 solid;
			font-size: 28rpx;
		}
	}

	.deliveryTime {
		.deliveryTime-header {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}

		.deliveryTime-item {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			.deliveryTime-item-right {
				display: flex;
				align-items: center;
			}
		}
	}

	.btn {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #2979ff;
		border-radius: 4px;
		color: #fff;
		margin-top: 30rpx;
	}
}

.distributionScope-box {
	background-color: #fff;
	box-sizing: border-box;
	padding: 30rpx;
	border-radius: 24rpx;
	margin-top: 30rpx;
	.distributionScope-freePir {
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
	.distributionScope-header {
		margin-bottom: 30rpx;
		font-size: 28rpx;
		color: #444;
		font-weight: bold;
	}
	.distributionScope-form {
		font-size: 26rpx;
		.distributionScope-item {
			border-bottom: 1px #f3f3f3 solid;
			padding-bottom: 10px;
			.distributionScope-title {
				font-size: 26rpx;
				color: #999;
				margin: 10px 0px;
			}
			.distributionScope-pir {
				display: flex;
				align-items: center;
			}
			.distributionScope-distance {
				display: flex;
				align-items: center;
				margin-top: 10px;
			}
		}

		.distributionScope-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			.btn {
				background-color: #2979ff;
				color: #fff;
				font-size: 28rpx;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border-radius: 4px;
				margin-top: 20px;
				flex: 1;
			}
		}
	}
}
</style>
